import { createApp } from 'vue'

//  vue支持创建多个实例


import { addClass, removeClass } from '@/assets/js/dom'   // 做一些样式的优化 //

// 为什么要做优化？ 
// 是因为在使用的时候 如果作用的元素没有设置 定位样式，
// 对于loading组件来说就可能居中，所以需要做一个优化处理 //
// 详细使用 在 recommend.vue 组件里 //

const relativeCls = 'g-relative'

//  当前指令只用了两个生命周期钩子函数 

export default function createLoading 
    mounted(el, binding) {
      const app = createApp(Comp)
      const instance = app.mount(document.createElement('div'))


      const name = Comp.name  // 这个name意思是表示指令的名字 能够实现多个指令 //

      if (!el[name]) {  // 这里多加了一维 解决两个指令同时作用在一个组件 被覆盖的问题
        el[name] = {}
      }
      el[name].instance = instance


      const title = binding.arg // 动态参数 不为空的情况下去设置 //
      if (typeof title !== 'undefined') {
        instance.setTitle(title)
      }

      if (binding.value) {
        append(el)
      }
    },
    updated(el, binding) {
      const title = binding.arg
      const name = Comp.name  // 这里也是指令的名字 //

      if (typeof title !== 'undefined') {
        el[name].instance.setTitle(title)
      }
      if (binding.value !== binding.oldValue) {
        binding.value ? append(el) : remove(el)
      }
    }
  }

  function append(el) {
    const name = Comp.name
    //  getComputedStyle 这是一个domAPI 可以拿到el元素的 style //
    const style = getComputedStyle(el)
    if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
      // 如果不存在 就动态添加样式 //
      addClass(el, relativeCls)
    }
    el.appendChild(el[name].instance.$el)
  }

  function remove(el) {
    const name = Comp.name
    removeClass(el, relativeCls)
    el.removeChild(el[name].instance.$el)
  }
}
